<template>
	<div>
		<div>
			<van-nav-bar title="跳蚤市场" @click-right="showNewGoodPage">
				<template #right>
					<van-icon name="plus" size="18" />
				</template>
			</van-nav-bar>
			<van-search v-model="searchText" placeholder="请输入搜索关键词" @search = "serchGoodsList"/>
		</div>
		<div>
			<van-pull-refresh v-model="refreshing" @refresh="reflashGoodList" style="height: calc(100vh - 150px);overflow: scroll;">
				<van-list v-model:loading="loadingNewGoods" :finished="noMoreGoods" finished-text="没有更多了" @load="pushNewGoodList">
					<van-cell v-for="(good,key) in goodList" :key="key">
						<GoodCell :openDetailPage="showDetailPage" :data="good"></GoodCell>
					</van-cell>
				</van-list>
			</van-pull-refresh>
		</div>
		<van-popup v-model:show="payPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<PayPage></PayPage>
		</van-popup>
		<van-popup v-model:show="detailPage" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left" :before-close="detailPageCloseEvent">
			<GoodDetailPage :goodData="detailPageData" v-if="detailPageFlash" :showPayPage="showPayHandler" ref="goodDetailPage"  :openSellerPage="openSellerPage"></GoodDetailPage>
		</van-popup>
		<van-popup v-model:show="editNewGoodShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<EditNewGoodPage :close="closeNewGoodPage"></EditNewGoodPage>
		</van-popup>
		<van-popup v-model:show="sellerPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<UserHomePage :uid='sellerId'></UserHomePage>
		</van-popup>
	</div>
</template>

<script>
	import PayPage from './PayPage.vue';
	import GoodDetailPage from './GoodDetailPage.vue';
	import GoodCell from '@/components/units/GoodCell.vue';
	import EditNewGoodPage from './EditNewGoodPage.vue';
	import UserHomePage from './UserHomePage.vue';
	
	import {
		showLoadingToast,
		showNotify
	} from 'vant';
	import url from '@/assets/url.json';
	
	export default {
		data() {
			return {
				payPageShow: false,
				searchText: '',
				detailPage: false,
				detailPageFlash: true,
				editNewGoodShow: false,
				sellerPageShow: false,
				goodsPageIndex: 0,
				goodsLimit: 5,
				goodList:[],
				noMoreGoods:false,
				refreshing:false,
				loadingNewGoods: false,
				detailPageData: {},
				sellerId: ''
			}
		},
		components: {
			PayPage,
			GoodDetailPage,
			GoodCell,
			EditNewGoodPage,
			UserHomePage
		},
		methods: {
			openSellerPage(id){
				this.sellerId=id;
				this.sellerPageShow=true;
			},
			
			serchGoodsList(){
				this.$axios({
					url:url.ip+'/api-goods'+'/goods/getGoodsByName',
					method:'GET',
					params:{
						name: this.searchText
					},
					headers:{
						token: this.$cookies.get('token'),
					}
				}).then((res)=>{
					if(res.data.code!=0){
						showNotify({ type: 'danger', message: res.data.message });
					}else{
						this.searchText = ""
						this.goodList=[]
						let data=res.data.data;
						if(data.entityList.length<=0){
							this.noMoreGoods=true;
						}else{
							for(let key in data.entityList){
								// console.log(data.entityList[key]);
								this.goodList.push(data.entityList[key]);
							}
						}
					}
				})
				
			},
			showPay() {
				this.payPageShow = true;
			},
			showPayHandler() {
				showLoadingToast({
					message: '加载中...',
					forbidClick: true,
				});
				setTimeout(this.showPay, 1000);
			},
			showDetailPage(data){
				this.detailPageData=data;
				this.detailPageFlash=true;
				this.detailPage=true;
			},
			detailPageCloseEvent(){
				setTimeout(()=>{
					this.detailPageFlash=false
				},300);
				return true;
			},
			showNewGoodPage(){
				this.editNewGoodShow=true;
			},
			closeNewGoodPage(){
				this.editNewGoodShow=false;
			},
			reflashGoodList(){
				this.goodsPageIndex=0;
				this.goodList=[];
				this.pushNewGoodList();
			},
			pushNewGoodList(){
				this.goodsPageIndex+=1;
				this.$axios({
					url:url.ip+'/api-goods'+'/goods',
					method:'GET',
					params:{
						page: this.goodsPageIndex,
						limit: this.goodsLimit,
					},
					headers:{
						token: this.$cookies.get('token'),
					}
				}).then((res)=>{
					if(res.data.code!==0){
						this.noMoreGoods=true;
						showNotify({ type: 'danger', message: res.data.message });
					}else{
						let data=res.data.data;
						if(data.entityList.length<=0){
							this.noMoreGoods=true;
						}else{
							for(let key in data.entityList){
								// console.log(data.entityList[key]);
								this.goodList.push(data.entityList[key]);
							}
						}
					}
					this.loadingNewGoods=false;
					this.refreshing=false;
				}).catch(()=>{
					this.loadingNewGoods=false;
					this.refreshing=false;
					this.noMoreGoods=true;
					showNotify({ type: 'danger', message: "网络错误或未登录" });
				})
			}
		},
	};
</script>

<style>
	.xz-topnav {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 5;
	}

	.xz-content {
		margin-top: 13vh;
		background: #FAFAFA;
	}

	.xz-list {
		width: 98%;
		height: 30vh;
		border-radius: 1vh;
		position: relative;
	}

	.xz-nav {
		width: 100%;
		display: flex;
		position: absolute;
		bottom: 0;
	}

	.xz-xiangqing {
		width: 100%;
		height: 80vh;
		margin-top: 10vh;
		text-align: left;
	}

	.my-swipe {
		width: 100%;
		height: 70%;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		background-color: #39a9ed;
	}
</style>